<template>
  <div class="dashboard">
    <el-card>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="常用监测量配置" name="first">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content">
                <div class=" bg-purple">
                  <el-button type="primary" icon="Plus" @click="configurationFormVisible = true">添加常用监测量</el-button>
                  <el-button icon="Delete" @click="handleDelete">删除常用监测量</el-button>
                </div>
                <el-table :data="monitorData" stripe style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="name" label="监测量名称"></el-table-column>
                  <el-table-column prop="unit" label="单位"></el-table-column>
                  <el-table-column prop="source" label="数据来源"></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="监测量筛选选项配置" name="second">
          <!-- 监测量筛选选项配置内容 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content">
                <div class="section">
                  <div class="title">
                    <h3>时间范围筛选</h3>
                    <el-switch v-model="timeRangeEnabled" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </div>
                  <el-date-picker v-model="dateRange" type="daterange" style="width: 100%" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>

                <div class="section">
                  <div class="title">
                    <h3>站点筛选</h3>
                    <el-switch v-model="timeRangeEnabled" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </div>
                  <el-select v-model="value" placeholder="Select" size="large" style="width: 100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>

                <div class="section">
                  <div class="title">
                    <h3>监测量类型筛选</h3>
                    <el-switch v-model="timeRangeEnabled" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </div>
                  <el-select v-model="value" placeholder="Select" size="large" style="width: 100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-button type="primary" style="width: 100%" @click="saveFilterConfig">保存筛选配置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 添加常用监测量配置 -->
    <el-dialog v-model="configurationFormVisible" align-center title="添加常用监测量配置" width="500">
      <el-input placeholder="请输入站点名称或编号搜索" size="large" v-model="configurationForm.searchQuery" @keyup.enter="handleSearch">
        <template #append>
          <el-button icon="Search" @click="handleSearch"></el-button>
        </template>
      </el-input>
      <el-table :data="monitorData" stripe style="width: 100%;margin-top: 20px;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="监测量名称"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="configurationFormVisible = false">取消</el-button>
          <el-button type="primary" @click="configurationFormVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// Reactive variables
const activeName = ref('first');
const configurationFormVisible = ref(false);
const configurationForm = ref({
  searchQuery:'',
  name: '',
  unit: '',
  source: ''
});
const monitorData = ref([
  { id: 1, name: '水位监测', unit: 'm', source: '传感器' },
  { id: 2, name: '温度监测', unit: '℃', source: '传感器' },
  { id: 3, name: '流量监测', unit: 'm³/s', source: '系统计算' },
  { id: 4, name: '水质监测', unit: 'mg/L', source: '人工录入' },
  { id: 5, name: '压力监测', unit: 'MPa', source: '传感器' }
]);

// Methods
const handleAdd = () => {
  // Handle add logic
  console.log('Adding new monitoring data');
};

const handleDelete = () => {
  // Handle delete logic
  console.log('Deleting selected monitoring data');
};
const handleSearch = () => {

}
</script>

<style scoped>
.grid-content {}

.section {
  display: flex;
  flex-direction: column;

}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bg-purple {
  margin: 20px 0;
}
</style>